<template>
  <div class="trio-page">
    <!-- 默认布局 -->
    <div class="mixin-layout" :class="{ 'full-scren': isFullScren }">
      <!-- 顶部菜单 -->
      <Header />
      <Sidebar />
      <div class="trio-layout">
        <!-- 顶部标签卡 -->
        <Tags />
        <!-- 主体视图层 -->
        <div class="trio-view">
          <keep-alive>
            <router-view class="page-view" v-if="$route.meta.keepAlive" />
          </keep-alive>
          <router-view class="page-view" v-if="!$route.meta.keepAlive" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { validatenull, calcDate } from "@/utils/validate";
import { getStore } from "@/utils/store.js";
import { mapGetters } from "vuex";
import Header from "@/components/header";
import Sidebar from "../sidebar/index.vue";
import Tags from "./tags.vue";
import admin from "@/utils/admin";
export default {
  name: "PageIndex",
  components: {
    Header,
    Sidebar,
    Tags,
  },
  computed: {
    ...mapGetters(["isFullScren", "token"]),
  },
  data() {
    return {
      refreshTime: null,
    };
  },
  watch: {
    token(newValue) {
      if (!newValue || newValue == "") {
        clearInterval(this.refreshTime);
      }
    },
  },
  created() {
    this.refreshToken();
  },
  mounted() {
    this.init();
  },
  methods: {
    // 初始化
    init() {
      this.$store.commit("SET_SCREEN", admin.getScreen());
      window.onresize = () => {
        setTimeout(() => {
          this.$store.commit("SET_SCREEN", admin.getScreen());
        }, 0);
      };
    },
    // 定时检测token
    refreshToken() {
      this.refreshTime = setInterval(() => {
        const token =
          getStore({
            name: "token",
            debug: true,
          }) || {};
        const date = calcDate(token.datetime, new Date().getTime());
        if (validatenull(date)) return;
        if (date.seconds >= this.$website.tokenTime) {
          this.$store.dispatch("refreshToken");
        }
      }, 10000);
    },
  },
};
</script>
